<template>
  <van-popup
    :value="value"
    round
    position="bottom"
    class="pay-way-popup"
    @close="closePop"
    @open="openPop"
    get-container="body"
    overlay-class="custom-overlay"
    :overlay-style="{ zIndex: '8887' }"
    close-on-popstate
    :close-on-click-overlay="false"
  >
    <div>
      <div class="popup-header">
        <div class="title">支付方式</div>
        <i
          class="van-icon van-icon-cross van-action-sheet__close"
          @click="closePop"
        ></i>
      </div>
      <div class="popup-main">
        <div class="price-box">
          <span class="price-tag">¥</span>
          <span class="price">{{ price }}</span>
        </div>
        <div class="pay-way-box">
          <van-radio-group :value="payWay" class="pay-way-wrapper">
            <van-cell-group inset>
              <div
                v-for="item in wayList"
                :key="item.pay_way"
                @click="changePayWay(item)"
                class="pay-cell"
                :class="{ disabled: item.disabled }"
              >
                <van-cell clickable>
                  <template #title>
                    <div class="custom-title">
                      <img :src="appIcon(item.name)" class="app-icon" />
                      <span type="danger">{{ item.name }}</span>
                      <template v-if="isHuabei(item.pay_way)">
                        <span class="installment-tag" v-if="maxInterestFree">{{
                          maxInterestFree
                        }}</span>
                      </template>
                    </div>
                  </template>
                  <template #right-icon>
                    <van-radio :name="item.pay_way" :disabled="item.disabled" />
                  </template>
                </van-cell>
                <span class="pay-way-tips" v-if="item.tips">{{
                  item.tips
                }}</span>
                <div
                  class="stages-wrapper"
                  v-if="isHuabei(item.pay_way) && showInstallMent"
                >
                  <div
                    class="stages"
                    :class="{
                      'stages-active':
                        installment === stages.installment && payWay === 14,
                    }"
                    @click="selectStages(stages)"
                    v-for="stages in huaBeiInstallment"
                    :key="stages.installment"
                  >
                    <div
                      style="
                        font-size: 0.28rem;
                        font-weight: 500;
                        width: fit-content;
                        min-width: 2.8rem;
                      "
                      class="font-color-stages"
                    >
                      ¥{{ stages.repayment_amount_average | fixedPrice }} x
                      {{ stages.installment }}期
                    </div>
                    <div
                      style="
                        font-size: 0.24rem;
                        width: fit-content;
                        min-width: 2.8rem;
                      "
                      class="font-color-stages"
                    >
                      <template v-if="stages.is_interest_free"
                        >免手续费</template
                      >
                      <template v-else
                        >手续费 ¥{{
                          stages.service_fee_average | fixedPrice
                        }}/期</template
                      >
                    </div>
                  </div>
                </div>
              </div>
            </van-cell-group>
          </van-radio-group>
        </div>
      </div>
      <div class="popup-footer" @click="goPay">确认支付</div>
    </div>
  </van-popup>
</template>

<script>
import { Popup, RadioGroup, Radio, Cell, CellGroup } from "vant";
import { appIconKeyMap } from "./iconBase64";
export default {
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    ways: {
      type: Array,
      default: () => {
        return [{ name: "微信支付", pay_way: 6 }];
      },
    },
    huaBeiInstallment: {
      type: Array,
      default: () => {
        return [];
      },
    },
    price: {
      default: 0,
    },
    defaultPayWay: {
      default: null,
    },
  },
  components: {
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  mounted() {
    this.payWay = this.defaultPayWay || this.payWay;
  },
  data() {
    return {
      payWay: 0,
      installment: 3,
    };
  },
  filters: {
    fixedPrice(val) {
      return (Number(val) / 100).toFixed(2);
    },
  },
  methods: {
    isHuabei(val) {
      return val === 14;
    },
    selectStages(stage) {
      const { installment } = stage;
      this.installment = installment;
    },
    closePop() {
      this.$emit("input", false);
      this.$emit("changePayWay", {
        isClose: 1
      });
    },
    openPop() {
      this.$emit("input", true);
    },
    goPay() {
      let payWay = {
        way: this.payWay,
      };
      if (this.payWay === 14) {
        payWay = {
          ...payWay,
          ...this.huabeiParams,
        };
      }
      this.$emit("changePayWay", payWay);
    },
    changePayWay(item) {
      const { pay_way, disabled } = item;
      if (disabled) return;
      this.payWay = pay_way;
    },
    appIcon(key) {
      return appIconKeyMap[key];
    },
  },
  computed: {
    huabeiParams() {
      if (
        Array.isArray(this.huaBeiInstallment) &&
        this.huaBeiInstallment.length
      ) {
        const stage = this.huaBeiInstallment.filter((item) => {
          return item.installment === this.installment;
        })[0];
        const { installment, is_interest_free, installment_activity } = stage;
        return {
          installment,
          isInterestFree: is_interest_free,
          installmentActivity: installment_activity,
        };
      } else {
        return {};
      }
    },
    wayList() {
      return this.ways.map((item) => {
        item.disabled = item.pay_enable === 2;
        item.tips =
          item.pay_way === 14 && item.disabled
            ? "实付金额低于10元，不支持该付款方式"
            : "";
        return item;
      });
    },
    showInstallMent() {
      return this.interestFreeList.length || this.payWay === 14;
    },
    interestFreeList() {
      return (
        (Array.isArray(this.huaBeiInstallment) &&
          this.huaBeiInstallment.filter((item) => {
            return item.is_interest_free;
          })) ||
        []
      );
    },
    maxInterestFree() {
      if (this.interestFreeList.length === this.huaBeiInstallment.length) {
        return "分期免息";
      }
      return this.interestFreeList.length
        ? `${
            this.interestFreeList[this.interestFreeList.length - 1].installment
          }期免息`
        : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  z-index: 8888 !important;
}

.popup-header {
  height: 0.96rem;
  font-size: 16px;
  font-weight: 500;
  font-family: "PingFang SC";
  margin-bottom: 0.48rem;

  .title {
    text-align: center;
    width: 100%;
    position: relative;
    line-height: 0.96rem;
    font-weight: 600;
    color: #333333;
  }

  .van-action-sheet__close {
    width: 0.96rem;
    position: absolute;
    right: 0;
    height: 0.96rem;
    text-align: center;
    line-height: 0.96rem;
    padding: 0;
    top: 0;
  }
}

.popup-main {
  height: 8.32rem;

  .price-box {
    margin-bottom: 0.48rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;

    .price-tag {
      color: rgba(51, 51, 51, 1);
      font-size: 24px;
      font-weight: 500;
      font-family: "PingFang SC";
    }

    .price {
      color: rgba(51, 51, 51, 1);
      font-size: 40px;
      font-weight: 700;
      font-family: "PingFang SC";
    }
  }

  .pay-way-box {
    margin: 0 0.48rem 0 0.48rem;
    min-height: 2.24rem;
    border-radius: 0.16rem;
    border: 0.5px solid #cccccc;
    width: calc(100% - 0.96rem);
    margin-bottom: 0.48rem;
    .pay-way-wrapper {
      background: #fff;
      font-size: 0.28rem;
      border-radius: 0.16rem;

      .pay-cell {
        .van-cell {
          &:after {
            display: none;
          }
        }
        &:not(:last-child) {
          .van-cell {
            border-bottom: solid 0.5px #cccccc;
          }
        }
      }
      .disabled {
        .van-cell {
          opacity: 0.4;
        }
        .stages-wrapper {
          opacity: 0.4;
        }
      }

      .van-cell {
        padding: 0.28rem 0;
        font-size: 0.28rem;
        font-weight: 400;
        height: 1.12rem;
        overflow: visible;
        border-radius: 0.16rem 0 0;
        margin: 0 0.32rem;
        width: auto;

        .van-radio {
          overflow: visible;
        }
      }

      .van-cell-group--inset {
        overflow: visible;
      }

      .van-cell-group {
        margin: 0;
        border-radius: 0.16rem;
        &::after {
          display: none;
        }
      }

      .custom-title {
        display: flex;
        align-items: center;

        .app-icon {
          width: 0.48rem;
          height: 0.48rem;
          margin-right: 0.16rem;
        }

        .installment-tag {
          width: 0.98rem;
          height: 0.32rem;
          display: inline-block;
          margin-left: 0.16rem;
          color: #ff781f;
          background: #fff3eb;
          font-size: 0.2rem;
          line-height: 0.32rem;
          text-align: center;
          border-radius: 0.04rem;
          font-weight: 500;
        }
      }
    }
  }
}
.pay-way-tips {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 0.32rem;
  line-height: 0.32rem;
  padding: 0.08rem 0.24rem;
  border-radius: 0.08rem;
  color: #000;
  font-size: 0.24rem;
  font-weight: 400;
  opacity: 1 !important;
  text-wrap: wrap;
  background: #f5f5f5;
  margin: 0 0.28rem 0.32rem;
}
.stages-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  padding-top: 0.01rem;
  margin: 0 0.32rem;
  .stages {
    border-radius: 0.08rem;
    background: #f5f5f5;
    width: fit-content;
    height: fit-content;
    margin-bottom: 0.16rem;
    padding: 0.16rem 0;
    .font-color-stages {
      color: #333;
    }
  }
  .stages-active {
    outline: 0.01rem solid #1472ff;
    background: #ebf3ff;
    .font-color-stages {
      color: #1472ff;
    }
  }
}

.popup-footer {
  font-size: 16px;
  font-weight: 500;
  font-family: "PingFang SC";
  color: rgba(255, 255, 255, 1);
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  border-radius: 0.4rem;
  margin: 0.16rem 0.32rem;
  background: #FF781F;
  width: calc(100% - 0.64rem);
}
.van-cell--clickable:active {
  background: #fff;
}
</style>